<script>

import DrawerStyle from '@/components/DrawerStyle/index.vue'
import QuickLayout from '@/components/QuickLayout/index.vue'
import DictDataEditionVue from '@/views/system/dict/dict-data-edition.vue'

export default {
  components: { DictDataEditionVue, QuickLayout, DrawerStyle },
  data() {
    return {
      dataListUrl: '/sys/dict/data/page',
      deleteUrl: '/sys/dict/data',
      visible: false,
      dictId: null
    }
  },
  methods: {
    handleEdit(id) {
      this.$refs.RefDictData.init(id)
    },
    handleClose() {
      this.visible = false
      this.$emit('refresh')
    },
    init(id) {
      this.dictId = id
      this.visible = true
      this.$nextTick(() => {
        this.$refs.RefQuickLayout.setQueryParams('dictTypeId', id)
        this.$refs.RefQuickLayout.query()
      })
    }
  }
}
</script>

<template>
  <drawer-style :visible="visible" size="60%" :close-on-click-modal="true" title="字典数据" @close="handleClose">
    <quick-layout
      ref="RefQuickLayout"
      text-align="left"
      :is-operate-btn="true"
      :is-operate="true"
      :data-list-url="dataListUrl"
      :delete-url="deleteUrl"
      size="small"
      @edit="handleEdit"
      @created="handleEdit(null)"
    >

      <!-- 主体 -->
      <template>
        <el-table-column type="selection" header-align="center" align="center" width="50" />
        <el-table-column prop="dictValue" label="字典值" header-align="center" align="center" />
        <el-table-column prop="dictLabel" label="字典标签" header-align="center" align="center">
          <template #default="scope">
            <el-tag v-if="scope.row.labelClass" :type="scope.row.labelClass === 'primary' ? '' : scope.row.labelClass">
              {{ scope.row.dictLabel }}
            </el-tag>
            <span v-else>
              {{ scope.row.dictLabel }}
            </span>
          </template>
        </el-table-column>
        <el-table-column prop="sort" label="排序" sortable="custom" header-align="center" align="center" />
        <el-table-column prop="createTime" label="创建时间" header-align="center" align="center" width="180" />
      </template>

      <!-- 组件 -->
      <template #component>
        <dict-data-edition-vue ref="RefDictData" />
      </template>

    </quick-layout>
  </drawer-style>
</template>

<style scoped lang="scss">

</style>
